<template>
    <view>
        <view class="modal-mask" @tap="hideModal" v-if="showModal" @touchmove.stop.prevent="trueFun" style="overflow: visible !important"></view>
        <!-- 弹出层 -->
        <view v-if="showModal" @touchmove.stop.prevent="trueFun" style="overflow: visible !important">
            <view class="modal-content" @touchmove.stop.prevent="trueFun" style="overflow: visible !important">
                <view class="qrcodetextbox">
                    <view class="time-box2">
                        <image class="time-left" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/time_lt.png"></image>
                        <view class="qrcodetext">选择会员</view>
                        <image class="time-left" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/time_rl.png"></image>
                    </view>
                    <image class="done" @tap="done" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/done.png"></image>
                </view>

                <view class="qrcodebox">
                    <view class="qrcodetextbox2">
                        <input
                            class="input-phone-up"
                            maxlength="11"
                            @input="blurPhone2"
                            value=""
                            placeholder="请输入顾客手机号码"
                            placeholder-class="placeholder-style2"
                            type="text"
                        />
                        <view class="inquire2" @tap="inquire2">查询</view>
                    </view>
                    <!-- <view class="phone-hint2" wx:if="{{ishint}}">
      输入正确手机号
    </view> -->
                    <view class="replace-box" v-if="memberLists.mobile">
                        <view class="replace-lt">
                            <image class="girl2" mode="aspectFill" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/girl.png"></image>
                            <view>
                                <view class="lt-nname">{{ memberLists.userName }}</view>
                                <view class="lt-hpone2">{{ memberLists.mobile }}</view>
                            </view>
                        </view>
                        <view class="replace-rl" @tap="replace">去替换</view>
                    </view>
                </view>
                <view class="qrcodeicon">
                    <view class="qrcodeiconbox" v-for="(item, index) in serviceList" :key="index">
                        <image class="wechatvip" :src="item.img"></image>

                        <P class="wechattext">{{ item.title }}</P>
                    </view>
                </view>
            </view>
        </view>
        <!-- 选择弹窗 -->
        <view :class="'modal bottom-modal ' + (goodsTypeShowFlag ? 'show' : '')" @touchmove.stop.prevent="preventTouchMove" @tap="closeGoodsType">
            <view class="dialog dialog-goods" catchtap>
                <view class="bg-white padding">
                    <view class="popuptitle flexs margin-bottom-sm" v-for="(item, index) in moglist" :key="index">
                        <image :data-itemone="item.pic ? item.pic : goodsDetail.pic" @tap.stop.prevent="previewImg" :src="item.pic" mode="aspectFit"></image>

                        <view :class="'flexs flex-direction  padding-left-sm ' + (item.productName != null ? 'info_title' : 'info_title1')">
                            <view class="text-dg text-red margin-top-xs text-left" v-if="item.productName != null">{{ item.productName }}</view>
                            <view class="text-dg text-red margin-top-xs text-left">¥{{ item.price }}</view>
                            <view v-if="checkMaker && item.priceMaker" class="margin-top-xs text-left">
                                <text class="mkr">创客价: ¥{{ item.priceMaker }}</text>
                            </view>
                            <view class="iconclose text-xl text-black" @tap="closeGoodsType">X</view>
                        </view>
                    </view>
                    <scroll-view class="scrolls" scroll-y>
                        <view class="flexs flex-direction padding-top">
                            <view class="text-dg text-left">规格</view>
                            <view class="flexs flex-wrap">
                                <view
                                    @tap="changskuid"
                                    :data-indexs="index"
                                    :data-item="item"
                                    :class="
                                        'moudle radiues text-dm margin-top-sm margin-right-sm padding-tb-xs padding-lr-lg ' + (indexs === index ? 'in text-white' : 'text-gray')
                                    "
                                    v-for="(item, index) in arrlist[0].mallSkuStockList"
                                    :key="index"
                                >
                                    <text v-for="(item, index1) in item.specification" :key="index1">{{ item.value }}</text>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                    <view class="flexs justify-between align-center padding-top-lg">
                        <view class="text-dg">数量</view>
                        <view class="flexs align-center text-car">
                            <view class="text-dg text-gray text-dd" @tap="sub">-</view>
                            <view class="amount flexs justify-center align-center">{{ num }}</view>
                            <view class="text-dg text-dd" @tap="add">+</view>
                        </view>
                    </view>
                    <view class="determine flexs justify-center align-center text-white bg-orange text-dg margin-top-lg" @tap="confirmBtnClick">确认</view>
                    <view class="determines"></view>
                </view>
            </view>
        </view>
        <!-- 会员信息 -->
        <view class="cashier_box_2">
            <view class="cardsale-conter">
                <view class="shop-message">
                    <view class="shop-lt">
                        <image v-if="memberList.headPicture" mode="aspectFill" class="lt-profile" :src="memberList.headPicture"></image>
                        <image class="lt-profile" mode="aspectFill" v-else src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/profile-hai.png"></image>
                        <view class="lt-name">
                            <view class="ada">
                                <text class="userNamess">{{ memberList.userName }}</text>
                                <text class="lt-shopvip" v-if="memberList.storeVip">{{ memberList.storeVip }}</text>
                            </view>
                            <view class="lt-phone">{{ memberList.mobile }}</view>
                        </view>
                    </view>
                    <view class="hr"></view>
                    <view class="shop-rl">
                        <view class="rl-vipbox">
                            <view class="rl-vip">{{ memberList.memberVip }}</view>
                            <view class="rl-remaining" v-if="memberList.balance">余额：¥{{ memberList.balance }}</view>
                            <view class="rl-remaining" v-else>余额：¥0</view>
                        </view>
                        <!-- <image bindtap="ElasticFrameClick" class="replace" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/replace.png"></image> -->
                    </view>
                </view>
                <view></view>
            </view>
        </view>
        <view class="type_btn">
            <view :class="(btnIndex === 0 ? 'hr_' : '') + ' project'" @tap="getBtnIndex" :data-index="0">
                <text>平台创客大礼包</text>
                <view v-if="btnIndex === 0"></view>
            </view>
            <!-- <view class="{{btnIndex === 1 ? 'hr_' : ''}} goods" bindtap="getBtnIndex" data-index="{{1}}">
    <text>门店礼包</text>
    <view wx:if="{{btnIndex === 1}}"></view>
  </view> -->
        </view>
        <view v-if="btnIndex == 0">
            <view class="search-box">
                <view class="search">
                    <van-icon name="search" size="18" class="seaicon" color="#666666" />
                    <input placeholder-class="placeholdername" @input="onsearchname" value="" placeholder="请输入项目名称/编号进行查询" type="text" />
                    <view class="align-baseline" @tap.stop.prevent="goSearch">查询</view>
                </view>
            </view>
            <view class="makeer-box">
                <view
                    class="makeer-conter"
                    :data-distributiontype="item.distributionType"
                    :data-id="item.id"
                    @tap="giftpack"
                    :data-bindindex="index"
                    :data-item="item"
                    v-for="(item, index) in giftpacksList"
                    :key="index"
                >
                    <view class="giftname-box">
                        <view class="giftname-ac"></view>
                        <view class="giftname">{{ item.name || '' }}</view>
                    </view>

                    <view class="amount-l">
                        <view class="amount-lt">
                            ¥
                            <text>{{ item.price }}</text>
                        </view>
                        <view class="amount-rl" v-if="item.originalPrice">
                            ¥
                            <text>{{ item.originalPrice }}</text>
                        </view>
                    </view>

                    <image class="Statuscheck_icon" v-if="item.btnindexs" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/Statuscheck_icon.png"></image>

                    <view class="condition" v-else></view>
                </view>
            </view>
            <view class="base_btn"></view>
            <view class="base-box">
                <view class="serve-box" v-if="giftbaglistac.giftname">
                    <image class="serve-icon" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/serve-icon.png"></image>
                    <view class="serve-name">合计1大礼包</view>
                </view>
                <view class="base-botton">
                    <view class="botton-entry" @tap="handbrand">上一步</view>
                    <!-- <view class="botton-entry"  bindtap="makeerdetails">下一步</view> -->

                    <view class="botton-entry" @tap.stop.prevent="getgoodsTypeShowFlag">下一步</view>
                </view>
            </view>
        </view>
        <view v-if="btnIndex == 1">
            <image class="bonus" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/bonus.png"></image>
            <view class="nobonus">暂无门店礼包～</view>
        </view>
    </view>
</template>

<script>
// pagesc/makerbilling/index.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js');

export default {
    data() {
        return {
            ids: '',
            moglist: [],
            distributionType: '',
            currentObj: '',
            currentObjss: [],
            currentObjs: {},
            indexs: 0,
            btnindexs: false,
            type: 4,
            phone3: '',
            memberList: [],

            giftbaglistac: {
                giftname: ''
            },

            giftpacksList: [],
            btnIndex: 0,
            goodsTypeShowFlag: false,
            searchname: '',
            num: 1,
            showModal: false,
            addShopCarFlag: '',

            memberLists: {
                mobile: '',
                userName: ''
            },

            isNaa: '',
            memberStatus: '',
            arrlist: '',
            serviceList: [],

            goodsDetail: {
                pic: ''
            },

            checkMaker: '',
            mallSkuStockList: []
        };
    },
    onLoad(options) {
        console.log('111', JSON.parse(options.memberList));

        if (options.memberList) {
            this.setData({
                memberList: JSON.parse(options.memberList)
            });
        }

        console.log(this.searchname, 11);
        this.getPlatMakerList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
        this.setData({
            searchname: ''
        });
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        done() {
            this.setData({
                showModal: false
            });
        },

        // 编辑数量
        add() {
            this.setData({
                num: this.num + 1
            });
        },

        sub() {
            if (this.num == 1) {
                return;
            }

            this.setData({
                num: this.num - 1
            });
        },

        // 规格弹窗
        getgoodsTypeShowFlag(e) {
            console.log(e, 'eeeeeeeeeeeeeeeeeeeee');
            let moglists = [];
            moglists.push(this.arrlist[0].mallSkuStockList[0]);
            console.log('bbbbb', this.arrlist[0].mallSkuStockList[0]);
            this.setData({
                goodsTypeShowFlag: true,
                addShopCarFlag: e.currentTarget.dataset.type,
                moglist: moglists
            });
        },

        blurPhone2: function (e) {
            var phone3 = e.detail.value;
            console.log('a', phone3);
            this.setData({
                phone3: phone3
            });
        },

        ElasticFrameClick: function () {
            this.setData({
                showModal: true
            });
        },

        // 根据手机号码查询会员
        getMemberByMobile(phone) {
            _request
                .get('/cashier/getMemberByMobile', {
                    shopId: uni.getStorageSync('shopId'),
                    mobile: phone
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        let obj = res.data.data;
                        obj instanceof Object;

                        if (obj instanceof Object == false) {
                            uni.showToast({
                                title: res.data.data,
                                icon: 'none'
                            });
                        }

                        console.log('obj instanceof Object', obj instanceof Object);
                        console.log('3', res);
                        this.setData({
                            memberLists: res.data.data,
                            isNaa: obj instanceof Object,
                            memberStatus: res.data.data.memberStatus
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        inquire2() {
            this.getMemberByMobile(this.phone3);
        },

        replace() {
            this.Couponslist = [];
            this.setData({
                memberList: this.memberLists,
                showModal: false
            });
        },

        getBtnIndex(e) {
            console.log(e);
            const { index } = e.currentTarget.dataset;
            this.setData({
                btnIndex: index
            });
        },

        onsearchname(e) {
            console.log(e, 'input搜索输入');
            this.setData({
                searchname: e.detail.value
            });
        },

        giftpack(e) {
            console.log('123', e);
            console.log('123', e.currentTarget.dataset.distributiontype);
            var index = e.currentTarget.dataset.index; // var info = e.currentTarget.dataset.item
            // var params = [];
            // for ( var key in info) {
            //   var param = {};
            //   param.giftname= info.giftname;
            //   param.giftid= info.giftid;
            //   params.push(param);
            // }
            // console.log('11',info.giftname)
            // console.log(params)

            let selecteditem = e.currentTarget.dataset.item;
            let arr = [];
            arr.push(selecteditem);
            let data = this.giftpacksList;
            data.forEach((i) => {
                i.btnindexs = false;
            });
            this.giftpacksList[e.currentTarget.dataset.bindindex].btnindexs = true;
            this.setData({
                ids: e.currentTarget.dataset.id,
                giftpacksList: data,
                arrlist: arr,
                distributionType: e.currentTarget.dataset.distributiontype,
                giftbaglistac: e.currentTarget.dataset.item,
                btnindexs: true
            });
        },

        makeerdetails() {
            const { memberList, arrlist, type } = this;
            let memberLists = JSON.stringify(memberList);
            let arrlists = JSON.stringify(arrlist); // console.log('marketprice',marketprice)
            // if (Object.keys(this.data.giftbaglistac).length == 0) {
            //   wx.showToast({
            //     title: '请先选择活动',
            //     icon: 'none'
            //   })
            // } else {
            //   wx.navigateTo({
            //     url:'/pagesc/helpcard/index?memberList=' + memberLists + '&arrlist=' + arrlists + '&type=' + type,
            //   })
            // }

            if (this.btnindexs == false) {
                uni.showToast({
                    title: '请先选择活动',
                    icon: 'none'
                });
            } else {
                let marketprice = arrlist[0].makerMoney; // wx.navigateTo({
                //   url: '/pagesc/helpcard/index?memberList=' + memberLists + '&arrlist=' + arrlists + '&type=' + type + '&marketprice=' + marketprice,
                // })
            }
        },

        /**
         * 生命周期函数--监听页面加载
         */
        // 获取平台创客大礼包
        getBigGift() {
            _request
                .get('/cashier/getPlatMakerList', {
                    storeId: uni.getStorageSync('storeId'),
                    userId: uni.getStorageSync('userid'),
                    queryValue: this.searchname
                })
                .then((res) => {
                    // console.log('11', res)
                    if (res.data.code == 200) {
                        this.setData({
                            giftpacksList: res.data.data.map((item) => {
                                item.productSkuId = item.id;
                                item.mallSkuStockList.map((v) => {
                                    v.specification = JSON.parse(v.specification);
                                    return v;
                                });
                                return item;
                            }) // currentObj: res.data.data[0].mallSkuStockList[0],
                        });
                    } // console.log('aa', res)
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 创客
        getPlatMakerList() {
            this.getBigGift();
        },

        goSearch() {
            this.getBigGift();
        },

        //选择规格
        changskuid(e) {
            console.log('111', e);
            let indexs = e.currentTarget.dataset.indexs;
            console.log(indexs, 'indexs1111111111111111111');
            let moglists = [];
            moglists.push(this.arrlist[0].mallSkuStockList[indexs]);
            this.setData({
                // num: 1,
                indexs: indexs,
                currentObjs: e.currentTarget.dataset.item,
                moglist: moglists
            });
        },

        // 关闭弹窗
        closeGoodsType() {
            this.setData({
                goodsTypeShowFlag: false,
                num: 1,
                indexs: 0
            });
        },

        confirmBtnClick() {
            const {
                arrlist,
                currentObjs,
                memberList,
                type,
                num,
                distributionType,
                ids,
                moglist // marketprice
            } = this;
            let price = moglist[0].price;
            let currentObjss = []; // currentObjss.push(currentObjs)

            this.setData({
                currentObjss: currentObjss.push(currentObjs)
            });
            console.log('aaw', currentObjss);
            this.setData({
                currentObjss: currentObjss.map((item) => {
                    item.goodsType = 0;
                    item.ids = item.id;
                    item.isPurchase = 1;
                    item.memberId = memberList.memberId;
                    item.memberNickname = memberList.userName;
                    item.productCategoryId = 1;
                    item.productSkuCode = item.skuCode;
                    item.productSkuId = item.id;
                    item.quantity = this.num;
                    item.userId = uni.getStorageSync('userId');
                    return item;
                }) // arrlist: arrlist.map((item) => {
                //   item.specification = currentObjss
                //   return item
                // })
            });
            setTimeout(() => {
                let memberLists = JSON.stringify(memberList);
                let arrlists = JSON.stringify(this.currentObjss);
                let marketprice = arrlist[0].makerMoney;
                let productCategoryName = arrlist[0].productCategoryName;
                uni.navigateTo({
                    url:
                        '/pagesc/helpcard/index?memberList=' +
                        memberLists +
                        '&num=' +
                        num +
                        '&arrlist=' +
                        arrlists +
                        '&type=' +
                        type +
                        '&marketprice=' +
                        price +
                        '&distributionType=' +
                        distributionType +
                        '&ids=' +
                        ids +
                        '&productCategoryName=' +
                        productCategoryName +
                        '&hangType=' +
                        '2'
                });
            }, 500);
        },

        hideModal() {
            console.log('占位：函数 hideModal 未声明');
        },

        trueFun() {
            console.log('占位：函数 true 未声明');
        },

        preventTouchMove() {
            console.log('占位：函数 preventTouchMove 未声明');
        },

        previewImg() {
            console.log('占位：函数 previewImg 未声明');
        },

        handbrand() {
            console.log('占位：函数 handbrand 未声明');
        }
    }
};
</script>
<style>
.cashier_box_2 {
    width: 750rpx;
    height: 240rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.shop-message {
    height: 140rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(242, 93, 3, 0.16);
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    width: 670rpx;
}

.shop-lt {
    width: 314rpx;
    height: 80rpx;
    display: flex;
}

.hr {
    width: 2rpx;
    height: 130rpx;
    background: linear-gradient(0deg, #ffffff, #e94a18, #ffffff);
}

.lt-profile {
    width: 80rpx;
    height: 80rpx;
    /* background: linear-gradient(0deg, #F1AA14 0%, #FB7099 100%); */
    /* border: 2rpx solid #FFFFFF; */
    /* box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(156, 100, 2, 0.2); */
    border-radius: 50%;
    margin-left: 20rpx;
}

.lt-name {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-left: 13rpx;
}

.userNamess {
    display: block;
    width: 70rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ada {
    display: flex;
}

.lt-shopvip {
    width: 100rpx;
    height: 32rpx;
    background-color: rgba(233, 74, 24, 0.1);
    border-radius: 4rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
    padding: 0rpx 10rpx;
}

.lt-phone {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-top: 10rpx;
}

.shop-rl {
    width: 354rpx;
    display: flex;
    align-items: center;
    height: 80rpx;
    justify-content: space-between;
}

.rl-vip {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.rl-remaining {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-top: 10rpx;
}

.rl-vipbox {
    margin-left: 28rpx;
}

.replace {
    width: 54rpx;
    height: 54rpx;
    margin-right: 15rpx;
}

.type_btn {
    width: 750rpx;
    height: 95rpx;
    background: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.project text {
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.project view {
    width: 58rpx;
    height: 8rpx;
    background: #e94a18;
}

.goods {
    margin-left: 211rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.goods view {
    width: 58rpx;
    height: 8rpx;
    background: #e94a18;
}

.goods text {
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.classify_box {
    width: 25%;
}

.classify_img {
    width: 80rpx;
    height: 80rpx;
}

.banner_img2 {
    width: 710rpx;
    height: 166rpx;
}

.bar_box {
    width: 60rpx;
    height: 6rpx;
    margin: 0 auto;
}

.hr_ text {
    font-size: 32rpx !important;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333 !important;
}

.search-box {
    height: 100rpx;
    padding: 0rpx 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #e5e5e5;
}

.search {
    display: flex;
    border: 1rpx solid #dcdcdc;
    border-radius: 10rpx;
    width: 710rpx;
    height: 60rpx;
    background: #fff;
    align-items: center;
    border-radius: 30rpx;
}

.search-quality {
    line-height: 60rpx;
    width: 457rpx;
    height: 60rpx;
    border-radius: 22px;
    display: flex;
    border: 1rpx solid #dcdcdc;
    background: linear-gradient(0deg, #ffffff 0%);
    border-radius: 10rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999999;
}

.mt-20 {
    margin-top: 0rpx;
}

.seaicon {
    margin: 0 7rpx 0rpx 11rpx;
    margin-top: 4rpx;
}

.adaptive {
    height: 150rpx;
}

.search text {
    font-size: 24rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 400;
    line-height: 60rpx;
    font-family: Source Han Sans CN;
    color: #999999;
}

.myorder {
    width: 172rpx;
    height: 50rpx;
}

.myquality {
    width: 212rpx;
    height: 50rpx;
}

.classify-box {
    background-color: #fff;
    /* height: 100vh; */
}

input {
    width: 580rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.placeholdername {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #999999;
}

.align-baseline {
    width: 120rpx;
    text-align: center;
    line-height: 50rpx;
    height: 50rpx;
    background: #e94a18;
    border-radius: 30rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    margin-right: 10rpx;
}

.makeer-box {
    padding: 0rpx 40rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.makeer-conter {
    position: relative;
    width: 320rpx;
    height: 140rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(102, 102, 102, 0.16);
    border-radius: 10rpx;
    margin-top: 40rpx;
}

.base-box {
    z-index: 9990;
    position: fixed;
    bottom: 0rpx;
    width: 100%;
    height: 288rpx;
    background: #ffffff;
    border: 1rpx solid #dcdcdc;
    box-shadow: 2rpx -9rpx 20rpx 0rpx rgba(160, 159, 159, 0.1);
}

.base_btn {
    width: 100%;
    height: 540rpx;
}

.sumtotal {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.base-botton {
    width: 670rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-top: 46rpx;
}

.botton-entry {
    text-align: center;
    line-height: 80rpx;
    width: 320rpx;
    height: 80rpx;
    background: #e94a18;
    border-radius: 40rpx;
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}

.condition {
    width: 42rpx;
    height: 42rpx;
    background: #ffffff;
    border: 2rpx solid #e94a18;
    border-radius: 4rpx;
    position: absolute;
    right: 15rpx;
    bottom: 15rpx;
}

.Statuscheck_icon {
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    right: 15rpx;
    bottom: 15rpx;
}

.giftname-box {
    display: flex;
    align-items: center;
    margin-top: 15rpx;
}

.giftname {
    width: 200rpx;
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.giftname-ac {
    width: 8rpx;
    height: 8rpx;
    background: #e94a18;
    border-radius: 50%;
    margin: 0rpx 10rpx 0rpx 15rpx;
}

.amount-l {
    display: flex;
    align-items: center;
    margin-top: 30rpx;
}

.amount-lt {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
    margin-left: 30rpx;
}

.amount-rl {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    text-decoration: line-through;
    color: #666666;
    margin-left: 10rpx;
}

.serve-box {
    display: flex;
    height: 100rpx;

    align-items: center;
    margin-left: 40rpx;
}

.serve-icon {
    width: 40rpx;
    height: 40rpx;
}

.serve-name {
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #222222;
}

/* 模态框 */
.modal-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden !important;
    z-index: 9999;
    color: #fff;
}

/* 白色背景 */
.modal-content {
    position: fixed;
    top: 380rpx;
    z-index: 9999;
    width: 670rpx;
    margin-left: 40rpx;
    height: 500rpx;
    overflow: visible !important;
    background: #ffffff;
    border: 1rpx solid #e5e5e5;
    box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(102, 102, 102, 0.3);
    border-radius: 10rpx;
}

.modal_title {
    height: 130rpx;
    display: flex;
    align-items: center;
    padding-left: 22rpx;
    background-color: #fff;
    color: #fff;
    text-align: center;
    /* border-radius: 20rpx 20rpx 0px 0px; */
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 130rpx;
    border-bottom: 1rpx solid #e5e5e5;
}

.qrcodetextbox {
    text-align: center;
    height: 113rpx;
    border-bottom: 1rpx solid #e5e5e5;
}

.qrcodetextbox2 {
    display: flex;
    height: 180rpx;
    align-items: center;
}

.qrcodetext {
    margin: 0 12rpx;
    font-size: 36rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 113rpx;
}

.qrcodeimage {
    width: 300rpx;
    height: 300rpx;
    display: block;
    margin: 0 auto;
}

.qrcodespan {
    display: block;
    text-align: center;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    margin-top: 20rpx;
}

.modal_titleicon {
    width: 82rpx;
    height: 82rpx;
    background: linear-gradient(0deg, #f1aa14 0%, #fb7099 100%);
    border: 2rpx solid #ffffff;
    box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(156, 100, 2, 0.2);
    border-radius: 50%;
}

.modal_titletext {
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    margin-left: 8rpx;
}

.modal_textarea {
    height: 395rpx;
    width: calc(100% - 40rpx);
    margin: 20rpx;
    overflow: visible !important;
}

.done {
    width: 26rpx;
    height: 26rpx;
    position: absolute;
    top: 18rpx;
    right: 11rpx;
}

.qrcodetextbox2 {
    display: flex;
    height: 180rpx;
    align-items: center;
}

.input-phone-up {
    width: 590rpx;
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1rpx solid #dcdcdc;
    border-radius: 40px;
    margin: 0 auto;
    padding-left: 20rpx;
}

.inquire2 {
    text-align: center;
    width: 120rpx;
    line-height: 60rpx;
    height: 60rpx;
    background: #e94a18;
    border-radius: 30rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    margin-right: 10rpx;
}

.replace-box {
    width: 590rpx;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(102, 102, 102, 0.16);
    border-radius: 10rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.replace-box {
    width: 590rpx;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(102, 102, 102, 0.16);
    border-radius: 10rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.replace-box2 {
    width: 590rpx;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(102, 102, 102, 0.16);
    border-radius: 10rpx;
    margin: 0 auto;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
}

.replace-lt {
    display: flex;
    align-items: center;
    height: 80rpx;
    margin-left: 20rpx;
}

.replace-rl {
    width: 120rpx;
    height: 54rpx;
    background: #e94a18;
    border-radius: 27rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    line-height: 54rpx;
    margin-right: 10rpx;
    text-align: center;
}

.replace-box2 {
    width: 590rpx;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(102, 102, 102, 0.16);
    border-radius: 10rpx;
    margin: 0 auto;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
}

.modal_textarea textarea {
    height: 100%;
    width: 100%;
}

.girl2 {
    width: 100rpx;
    height: 100rpx;
    margin-right: 29rpx;
    border-radius: 50%;
}

.qrcodeicon {
    width: 540rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.qrcodeiconbox {
    margin-top: 48rpx;
    width: 100rpx;
    text-align: center;
}

.time-box2 {
    width: 210rpx;
    display: flex;
    align-items: center;
    margin: 0 auto;
}

.time-left {
    width: 21rpx;
    height: 15rpx;
}

.wechattext {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
}

.modal-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden;
    z-index: 9000;
    color: #fff;
}

.modal-dialog {
    width: 540rpx;
    overflow: hidden;
    position: fixed;
    top: 40%;
    left: 0;
    z-index: 9999;
    background: #ffffff;
    margin: -180rpx 105rpx;
    border-radius: 10rpx;
}

.modal-title {
    padding-top: 50rpx;
    font-size: 36rpx;
    color: #333333;
    text-align: center;
}

.modal-content {
    padding: 50rpx 32rpx;
    position: relative;
}

.modal-input {
    display: flex;
    background: #f6f6f6;
    border-radius: 4rpx;
    font-size: 28rpx;
}

.model-num-text {
    position: absolute;
    right: 0rpx;
    bottom: 0rpx;
    font-size: 28rpx;
    margin-right: 10rpx;
}

.lable {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    min-width: 160rpx;
}

.input {
    height: 82rpx;
    font-size: 28rpx;
    line-height: 28rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    color: #333;
}

input-holder {
    color: #666;
    font-size: 28rpx;
}

.modal-footer {
    display: flex;
    flex-direction: row;
    height: 86rpx;
    border-top: 1px solid #dedede;
    font-size: 34rpx;
    line-height: 86rpx;
}

.btn-cancel {
    width: 50%;
    color: #333;
    text-align: center;
    border-right: 1px solid #dedede;
}

.btn-confirm {
    width: 50%;
    color: #e94a18;
    text-align: center;
}

.earningsbox2 {
    height: 240rpx;
}

.item-left {
    text-align: left;
    padding-left: 20rpx;
}

.modal-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden;
    z-index: 9000;
    color: #fff;
}

.modal-dialog {
    width: 540rpx;
    overflow: hidden;
    position: fixed;
    top: 40%;
    left: 0;
    z-index: 9999;
    background: #ffffff;
    margin: -180rpx 105rpx;
    border-radius: 10rpx;
}

.modal.bottom-modal .dialog {
    width: 100%;
    border-radius: 0;
}

.dialog {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
    width: 680rpx;
    max-width: 100%;
    border-radius: 10rpx;
    overflow: hidden;
}

/* 加入购物车弹窗 */
.popuptitle {
    height: 136rpx;
}

.popuptitle image {
    width: 136rpx;
    height: 136rpx;
}

.info_title {
    width: 470rpx;
    height: 136rpx;
    position: relative;
}

.info_title1 {
    width: 470rpx;
    height: 136rpx;
    position: relative;
    line-height: 136rpx;
}

.iconclose {
    position: absolute;
    right: -60rpx;
    top: -10rpx;
}

.bonus {
    width: 208rpx;
    height: 218rpx;
    display: block;
    margin: 0 auto;
    margin-top: 150rpx;
}

.nobonus {
    font-size: 24rpx;
    text-align: center;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}

.scrolls {
    max-height: 500rpx;
}

.bg-white {
    background-color: var(--white);
    color: var(--black);
    height: 560rpx;
}

.flex-wrap {
    flex-wrap: wrap;
}

.text-dm {
    font-size: 26rpx;
}

.margin-right-sm {
    margin-right: 20rpx;
}

.padding-lr-lg {
    padding-left: 40rpx;
    padding-right: 40rpx;
}

.in {
    border: 1px solid #e94a18;
    background: #e94a18;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

.moudle {
    border: 1px solid #666666;
    background: #ffffff;
}

.in {
    border: 1px solid #e94a18;
    background: #e94a18;
}

.text-car {
    height: 38rpx;
    border: 2rpx solid #aaa;
    border-radius: 10rpx;
}

.amount {
    height: 38rpx;
    border-left: 2rpx solid #aaa;
    border-right: 2rpx solid #aaa;
    padding-left: 10rpx;
    padding-right: 10rpx;
}

.determine {
    width: 100%;
    height: 76rpx;
    border-radius: 50rpx;
}

.determines {
    height: calc(2rpx + env(safe-area-inset-bottom) / 2);
}

button::after {
    border: none;
}

button {
    background-color: #fff;
    padding: 0;
    margin: 0;
}

.text-dd {
    font-size: 45rpx;
    padding-left: 10rpx;
    padding-right: 10rpx;
}

/* 列表样式 */
.goods_info {
    width: 340rpx;
    position: relative;
    box-shadow: 2px 4px 8px 0px #f5f5f5;
}

.goods_img {
    width: 340rpx;
    height: 340rpx;
}

.goods_sold {
    position: absolute;
    left: 0;
    bottom: 10rpx;
    line-height: 46rpx;
    border-radius: 0 20rpx 20rpx 0;
    background-color: rgb(0, 0, 0, 0.5);
}

.goodsdetail-container {
    padding: 10rpx;
    overflow-x: hidden;
}

.goodsdetail-banner-container {
    position: relative;
}

.shopping-banner-item {
    width: 100%;
    height: 100%;
}

.goodsdetail-banner-pageno {
    position: absolute;
    right: 15rpx;
    bottom: 65rpx;
    background-color: #f4f4f4;
    width: 100rpx;
    height: 40rpx;
    border-radius: 40rpx;
    line-height: 40rpx;
    color: #999999;
    text-align: center;
}

.goodsdetail-share-container {
    background-color: #fbefe4;
    text-align: center;
    font-size: 25rpx;
    color: #e94a18;
    padding: 3rpx 0;
}

.goodsdetail-flex-container {
    display: flex;
    flex-direction: row;
}

.bg-orange {
    background-color: #e94a18;
    color: var(--white);
}

.goodsdetail-flex-20 {
    flex: 20;
}

.goodsdetail-flex-9 {
    flex: 9;
}

.goodsdetail-share-btn {
    width: 50rpx;
    height: 50rpx;
}

.goodsdetail-text-bold {
    font-weight: 700;
}

.goodsdetail-share-text {
    font-size: 30rpx;
}

.goodsdetail-goods-name-text {
    font-size: 40rpx;
}

.goodsdetail-price-text {
    color: #ff1717;
    font-size: 40rpx;
}

.modal-title {
    padding-top: 50rpx;
    font-size: 36rpx;
    color: #333333;
    text-align: center;
}

.modal-content {
    padding: 50rpx 32rpx;
    position: relative;
}

.modal-input {
    display: flex;
    background: #f6f6f6;
    border-radius: 4rpx;
    font-size: 28rpx;
}

.model-num-text {
    position: absolute;
    right: 0rpx;
    bottom: 0rpx;
    font-size: 28rpx;
    margin-right: 10rpx;
}

.lable {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    min-width: 160rpx;
}

.input {
    height: 82rpx;
    font-size: 28rpx;
    line-height: 28rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    color: #333;
}

input-holder {
    color: #666;
    font-size: 28rpx;
}

/* 多选 */
.columntitle {
    padding-left: 30rpx;
    padding-right: 30rpx;
    height: 107rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-bolds {
    padding: 12rpx 26rpx;
    background: #e94c19;
    border-radius: 69rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
}

.text-dfs {
    padding: 12rpx 26rpx;
    background-color: rgba(153, 153, 153, 0.1);
    border-radius: 69rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
}

.margin-tb-sm {
    /* font-size: 30rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333; */

    padding-left: 9rpx !important;
    overflow: hidden;
    text-overflow: ellipsis !important;
    white-space: nowrap;
    margin-bottom: 15rpx;
}

.text-through {
    padding-left: 9rpx;
    margin-top: 10rpx;
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    text-decoration: line-through;
    color: #999999;
}

.sum-peasbox {
    width: 250rpx;
    height: 44rpx;
    color: #fff !important;
    border-radius: 0px 20rpx 20rpx 10rpx;
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    margin-bottom: 28rpx;
    line-height: 44rpx;
    padding-left: 14rpx;
    margin-top: 10rpx;
}

.sold-out {
    padding-left: 6rpx;
    width: 160rpx;
    height: 34rpx;
    background: linear-gradient(-90deg, #666666 0%, rgba(102, 102, 102, 0.03) 97%, rgba(255, 255, 255, 0) 100%);
}

.money-meaning {
    padding-left: 0rpx !important;
}

.guest-price {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    padding-left: 7rpx;
}

.all-deducted {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    margin-left: 20rpx;
}

.all-deductedee {
    margin-left: 130rpx;
}

.all-deductedees {
    margin-left: 50rpx;
    display: flex;
    align-items: center;
}

.shopgoods {
    width: 36rpx;
    height: 38rpx;
}

.columntitleleft {
    display: flex;
}

.shopgoodstext {
    height: 38rpx;
    line-height: 38rpx;
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #222222;
    margin-left: 11rpx;
}

.colummore {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
}

.padding-lr-xs {
    padding-left: 30rpx;
    padding-right: 30rpx;
    overflow-x: auto;
}

.padding-lr-sm {
    padding-left: 30rpx;
    padding-right: 30rpx;
}

.margin-top-sm {
    margin-top: 0rpx;
}

.padding-lr {
    padding-left: 0rpx;
    padding-right: 22rpx;
}

.swiper_img {
    width: 750rpx;
    height: 300rpx;
}

.search {
    height: 70rpx;
    background: #eeeeee;
}

.search_img1 {
    width: 28rpx;
    height: 28rpx;
}

.search_img2 {
    width: 60rpx;
    height: 60rpx;
}

.classify_box {
    width: 25%;
}

.classify_img {
    width: 80rpx;
    height: 80rpx;
}

.banner_img2 {
    width: 710rpx;
    height: 166rpx;
}
</style>
